/* components/player-bar/player-bar.wxss */
@import url(/styles/utils.less);
@import url(/styles/icomoon.less);

.canvas {
  position: fixed;
  left: 100%;
}

.dark-color {
  .info-text {
    color: #333 !important;
    .name {
      color: #333 !important;
    }
    .artists {
      color: #969799cc !important;
    }
  }
  .control {
    color: #333 !important;
  }
}

// 播放栏
.player-bar {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  box-sizing: border-box;
  padding: 0 8px;

  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  background: #fafafa;

  .cover-back {
    position: relative;
    flex: none;
    top: -8px;
    left: 20px;
    width: 35px;
    height: 35px;
    z-index: 1;
    border-radius: 50%;
    background: #000;

    .cover {
      position: absolute;
      border-radius: 10rpx;
      // display: inline-block;
      // z-index: -1;
      // overflow: hidden;
      width: 46px;
      height: 46px;

      left: 14%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  // 不使用旋转动画
  // @keyframes rotateAnimation {
  //   0% {
  //     transform: rotate(0);
  //   }

  //   100% {
  //     transform: rotate(360deg);
  //   }
  // }

  // .cover-animation {
  //   animation: rotateAnimation 30s linear infinite;
  // }

  .info-wrapper {
    flex: 1;
    height: 44px;
    display: flex;
    font-size: 28rpx;

    margin-left: 50rpx;
    margin-left: 50rpx;
    white-space: nowrap;
    overflow: hidden;

    .info-text {
      display: flex;
      align-items: center;
      height: 100%;
      margin-right: 50px;
      line-height: 28rpx;
      color: #fff;

      .name {
        font-weight: 500;
        color: #fff;
      }
      .artists {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .control {
    display: flex;
    align-items: center;
    font-size: 56rpx;
    z-index: 2;
    flex: none;
    margin-left: 10px;
    color: #fff;

    .icomoon {
      height: 100%;
    }

    .icon-playlist {
      margin-left: 20rpx;
    }
  }
}
.player-bar-placeholder {
  // height: 50px;
  width: 100%;
}
